<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>考神驾到手机站首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/public.css">

    <link href="person/css/style.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/windowsheight.js"></script>

    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>

    <style type="text/css">
        .a_special{ width:92.94871794871795%; display: block; height:100%;height:2em; margin:3.5% auto; line-height:2em;  text-align:center;}
        .img_special{ display:block; width:99.99%;border:1px solid #e0e0e0; border-radius:15px;}
        .p_special{ height:2.416666666666667em; line-height:2.416666666666667;white-space:nowrap; text-overflow: ellipsis;overflow:hidden;font-size:1em;}
        .img_special_div{
            margin-top: -25px;text-align: right;
        }
        .img_special_div div{
            margin-top: -18px;margin-right: 10px;
        }
        .img_special_div div label{
            color: #e9e9e9;
        }
        .left{
            float: left;
        }
        .common_title{

        }

    </style>
</head>

<body>


  <!-----------头部开始--------------->
<div class="top">
 <div class="topcon">
  <a href="#"  class="indexicon logo"><img src="images/yijiakoa_06.jpg"></a>
  <a href="#"  class="indexicon menumore"><img src="images/yijiakoa_11.jpg"></a>
 考神驾到
 </div>
</div>
<%--  隐藏菜单开始--%>
<div class="topmenu">
  <div class="topmenu_con">
    <div class="shouye"><a href="index.jsp"><img src="images/index.png"><span>首页</span></a></div>
      <h1>后台管理</h1>
      <div class="topgirl">
          <a href="${pageContext.request.contextPath}/manager_page/views/main.jsp">进入后台</a>
          <div class="clear"></div>
      </div>

    <div class="downtop">

<%--       <a href="#" class="pcload">PC客户端下载</a>--%>
<%--       <a href="#" class="appload">安卓APP下载</a>--%>
        <div class="clear"></div>
    </div>

    <div class="buttontop"><img src="images/button_115.jpg"/></div>
  </div>
</div>
<%--  隐藏菜单结束--%>
<div class="menu"> 
   <ul>
    <li><a href="info.jsp">驾考资讯</a></li>
    <li><a href="jiakao_baodian.jsp">驾考宝典</a></li>
    <li><a href="jiakao_video.jsp">驾考视频</a></li>
    <li><a href="jiaotong_biaoshi.jsp" class="rigsameborder">交通标识</a></li>
    <li><a href="javascript:to_practice(1);" class="bottomsameborder">科目一学习</a></li>
    <li><a href="javascript:to_practice(4);" class="bottomsameborder">科目四学习</a></li>
    <li><a href="jiakao_video.jsp" class="bottomsameborder">科目二学习</a></li>
    <li><a href="jiakao_video.jsp" class="rigbsameborder">科目三学习</a></li>
    <div class="clear"></div>
   </ul>                                           
</div>
<!-----------头部结束--------------->
<%--  轮播图--%>
<%--<div class="main">--%>
<%-- <div class="width">--%>
<%--     <ul class="clearfix" id="incltialiu">--%>
<%--        <li><img src="images/banner1.png"/></li>--%>
<%--        <li style="display:none"><img src="images/banner2.jpg" /></li>--%>
<%--        <li style="display:none"><img src="images/banner3.jpg" /></li>--%>
<%--        <li style="display:none"><img src="images/banner4.jpg" /></li>--%>

<%--     </ul>--%>
<%--     <div id="ciroe_jsNav" class="ciroe_lt_Nav clear"> <a class="trigger imgSelected" href="javascript:void(0)"></a> <a class="trigger" href="javascript:void(0)"></a><a class="trigger" href="javascript:void(0)"></a><a class="trigger" href="javascript:void(0)"></a></div>--%>
<%--  </div>--%>
<%-- </div>--%>









  <!-----------内容开始--------------->
 <div class="content">

     <div class="titlecom">
         <p><span>驾考资讯</span></p>
         <div class="tabtila fr">
             <a href="javascript:changeInfo('新手学车','');">新手学车</a> | <a href="javascript:changeInfo('驾考常识','');">驾考常识</a> | <a href="javascript:changeInfo('交通法规','');">交通法规</a>
             <a id="titlemore_info" href="javascript:;" class="titlemore"><img src="images/title_69.jpg"/></a>
         </div>
         <div class="moresort" id="moresort_div_parent_info">
             <div class="moresost_con">
                 <span><a href="javascript:changeInfo('','');">全部</a></span>
                 <span><a href="javascript:changeInfo('新手学车','');">新手学车</a></span>
                 <span><a href="javascript:changeInfo('驾考常识','');">驾考常识</a></span>
                 <span><a href="javascript:changeInfo('驾考攻略','');">驾考攻略</a></span>
                 <span><a href="javascript:changeInfo('交通法规','');">交通法规</a></span>
                 <span><a href="javascript:changeInfo('','科一');">科一相关</a></span>
                 <span><a href="javascript:changeInfo('','科四');">科四相关</a></span>
                 <span><a href="javascript:changeInfo('','科二');">科二相关</a></span>
                 <span><a href="javascript:changeInfo('','科三');">科三相关</a></span>
                 <div class="clear"></div>
             </div>
         </div>
     </div>
     <ul class="onlinetestall carguide" id="info_ul">
<%--         <li><span>145 阅读</span><a href="#"><span>[新手学车]</span>开封驾驶员考试网上自助预约...</a></li>--%>
<%--         <li><span>145 阅读</span><a href="#"><span>[新手学车]</span>开封驾驶员考试网上自助预约...</a></li>--%>
<%--         <li><span>145 阅读</span><a href="#"><span>[新手学车]</span>开封驾驶员考试网上自助预约...</a></li>--%>
     </ul>
     <a href="javascript:to_info('');" class="enter_guide">进入驾考资讯 >></a>
   <div class="kemutest">
      <a href="javascript:to_practice(1);" class="ke1 fl"><img src="images/ke1.png" class="img123"><span>科目一试题练习</span></a>
      <a href="javascript:to_practice(4);" class="ke4 fr"><img src="images/ke4.png" class="img123"><span>科目四试题练习</span></a>
      <div class="clear"></div>
   </div>
   <div class="titlecom">
      <p><span>在线题库</span></p>
      <div class="tabtila fr">
        <a  href="javascript:changeChapter('科一');">科目一</a> | <a href="javascript:changeChapter('科四');">科目四</a>
        <a href="javascript:;" class="titlemore common_title"><img src="images/title_69.jpg"/></a>
      </div>
      <div class="moresort">
        <div class="moresost_con">

          <div class="clear"></div>
        </div>
      </div>
   </div>          
   <ul class="onlinetestall" id="chapter_ul">
<%--         <li><span>200 测试</span><a href="kemu1_test_beginscreen.jsp">济源2014年公交驾校科源2014年公交驾校科目四目四</a></li>--%>
<%--         <li><span>200 测试</span><a href="kemu1_test_beginscreen.jsp">济源2014年公交驾校科目四</a></li>--%>
<%--         <li><span>200 测试</span><a href="kemu1_test_beginscreen.jsp">济源2014年公交驾校科目四</a></li>--%>
    </ul>
     <a href="javascript:to_practice(1);" class="enter_guide">进入试题练习 >></a>
    <div class="titlecom">
      <p><span>驾考视频</span></p>
      <div class="tabtila fr">
        <a href="javascript:changeVideo('科二');">科目二</a> | <a href="javascript:changeVideo('科三');">科目三</a>
        <a href="javascript:;" class="titlemore" id="titlemore_video"><img src="images/title_69.jpg"/></a>
      </div>          
      <div class="moresort" id="moresort_div_parent_video">
        <div class="moresost_con">
          <span><a href="javascript:changeVideo('科二');">科目二</a></span>
          <span><a href="javascript:changeVideo('科二倒车入库');">倒车入库</a></span>
          <span><a href="javascript:changeVideo('科二侧方停车');">侧方停车</a></span>
          <span><a href="javascript:changeVideo('科二坡道定点');">坡道定点</a></span>
          <span><a href="javascript:changeVideo('科二直角拐弯');">直角拐弯</a></span>
          <span><a href="javascript:changeVideo('科二曲线行驶');">曲线行驶</a></span>
          <span ><span class="a_special"></span></span>
          <span ><span class="a_special"></span></span>
          <span><a href="javascript:changeVideo('科三');">科目三</a></span>
          <span><a href="javascript:changeVideo('科三上车准备');">上车准备</a></span>
          <span><a href="javascript:changeVideo('科三直线行驶');">直线行驶</a></span>
          <span><a href="javascript:changeVideo('科三百米加减档');">百米加减档</a></span>
          <span><a href="javascript:changeVideo('科三灯光模拟考试');">灯光模拟考试</a></span>
          <div class="clear"></div>
        </div>
      </div>
   </div>
   <ul class="video_index" id="video_index_ul">
<%--      <li class="fl">--%>
<%--        <a href="javascript:;">--%>
<%--         <img src="images/car_119.jpg">--%>
<%--         <p>详解2015北美车展上美车展上的概...</p>--%>
<%--        </a>--%>
<%--      </li>--%>
<%--      <li class="fr left">--%>
<%--        <a href="javascript:;">--%>
<%--            <div>--%>
<%--         <img src="../my_image/bg_brid.jpg" class="img_special">--%>
<%--                <div class="img_special_div">--%>
<%--                    <img src="images/video_play.png" style="display:block; border:0px solid #e0e0e0; border-radius:30px;height: 20px;width: 20px;margin-left: 10px;">--%>
<%--                    <div><label>1:00</label></div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--         <p style="margin-top: 10px">详解2015北美车展上的概...</p>--%>
<%--        </a>--%>
<%--      </li>--%>
      <div class="clear"></div>
    </ul>
    <a href="jiakao_video.jsp" class="enter_guide">进入视频教程 >></a>
<%--    <div style="height:1.791666666666667em; width:100%; background:#fff;"></div>--%>
   <div style="height:1.791666666666667em; width:100%; background:#fff;"></div>


<%--   <div class="titlecom">--%>
<%--      <p><span>香车美女</span></p>--%>
<%--      <div class="tabtila fr">--%>
<%--        <a href="#">2015北京车展</a> | <a href="#">2015上海车展</a>--%>
<%--        <a href="#" class="titlemore"><img src="images/title_69.jpg"/></a>--%>
<%--      </div>               --%>
<%--      <div class="moresort">--%>
<%--        <div class="moresost_con">--%>
<%--          <span><a href="#">2015驾考</a></span>--%>
<%--          <span><a href="#">科目一</a></span>--%>
<%--          <span><a href="#">科目四</a></span>--%>
<%--          <span><a href="#">2015驾考</a></span>--%>
<%--          <span><a href="#">2015驾考</a></span>--%>
<%--          <span><a href="#">科目一</a></span>--%>
<%--          <span><a href="#">科目四</a></span>--%>
<%--          <span><a href="#">2015驾考</a></span>--%>
<%--          <div class="clear"></div>--%>
<%--        </div>--%>
<%--      </div>--%>
<%--   </div>--%>
<%--   <div class="cargielscon">--%>
<%--       <ul class="cargirl">--%>
<%--        <li>--%>
<%--          <a href="cargirl_detail.jsp"><img src="images/car_129.jpg"><div class="clear"></div></a>--%>
<%--          <p><a href="#">宾利系列汽车点评</a></p>--%>
<%--         </li>--%>
<%--          <li>--%>
<%--          <a href="cargirl_detail.jsp"><img src="images/car_129.jpg"><div class="clear"></div></a>--%>
<%--          <p><a href="#">宾利系列汽车点评</a></p>--%>
<%--         </li>--%>
<%--         <li>--%>
<%--          <a href="cargirl_detail.jsp"><img src="images/car_129.jpg"><div class="clear"></div></a>--%>
<%--          <p><a href="#">宾利系列汽宾利系列汽车点评车点评</a></p>--%>
<%--         </li>--%>
<%--         <div class="clear"></div>--%>
<%--       </ul>--%>
<%--    </div>--%>
<%--   <a href="cargirl.jsp" class="enter_guide">进入香车美女频道 >></a>--%>


     <div class="contentnew">
         <ul class="contentnew_con" id="news_ul">
<%--             <li>--%>
<%--                 <a href="test_kemu4.jsp" class="newsimg" ><img src="images/yijiakoa_24.jpg"></a>--%>
<%--                 <div class="newrigcon">--%>
<%--                     <h1><a href="test_kemu4.jsp">贵阳平安驾贵阳平安驾校科目四试题模拟练习校科目四试题模拟练习</a></h1>--%>
<%--                     <p>贵阳平安驾校科目四贵阳平安驾校科目四试题模拟练习试题模拟练习...  </p>--%>
<%--                 </div>--%>
<%--                 <div class="clear"></div>--%>
<%--             </li>--%>
         </ul>
         <div class="noborder">&nbsp;</div>
     </div>

 </div>
 <!-----------内容结束--------------->

  <br><br><br>

<div style="position: fixed;bottom: 0;width: 100%;">
  <footer class="aui-footer">
      <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
                    <span class="aui-tabBar-item-icon">
                        <img src="person/images/home_active.png" width="20" height="20" alt="">
                    </span>
          <span class="aui-tabBar-item-text">首页</span>
      </a>
      <a href="javascript:toPerson();" class="aui-tabBar-item ">
                    <span class="aui-tabBar-item-icon">
                       <img src="person/images/person.png" width="20" height="20" alt="">
                    </span>
          <span class="aui-tabBar-item-text">我的</span>
      </a>

  </footer>
</div>

<%-- <div class="footer">--%>
<%--   <p>©考神驾到版权所有</p>--%>
<%--   <span>www.kaoshenjiadao.com</span>--%>
<%-- </div>--%>


</body>
<!--头部高度赋给列表的topjs-->

<script>
    var layer;
    layui.use('layer',function(){
        layer=layui.layer;
    })

    var flag_title_info=true;
    var flag_title_video=true;

    window.onload=function(){
        initImg_path();
        changeVideo('科二');
        changeInfo('','');
        changeChapter('科一');
        changeNews();
    }

    //初始化后台虚拟路径
    function initImg_path(){
        $.ajax({
            url:"${pageContext.request.contextPath}/other/main_onload.do",
            success:function (data,status){

            }
        })
    }

    function changeVideo(video_class_sub){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_video/change_video.do",
            data:{
                "video_class_sub":video_class_sub
            },
            success:function(data,status){
                if(status=="success"){
                    var path="${pageContext.request.contextPath}/img_artificial/video_img/";
                    $("#video_index_ul").empty();
                    var end=data.length;
                    if(end>4)
                        end=4;
                    for(var i=0;i<end;i++){
                        var li=$("<li></li>").attr("class","fr left");
                        var a=$("<a></a>").attr("href","javascript:to_jiakao_videodetail("+data[i].video_id+");");
                        var div1=$("<div></div>");
                        var img1=$("<img>").attr({
                            "src":path+data[i].video_img,
                            "class":"img_special"
                        })
                        var div2=$("<div></div>").attr("class","img_special_div");
                        var img2=$("<img>").attr({
                            "src":"images/video_play.png",
                            "style":"display:block; border:0px solid #e0e0e0; border-radius:30px;height: 20px;width: 20px;margin-left: 10px;"
                        })
                        var div3=$("<div></div>");
                        var label=$("<label></label>").text(data[i].video_length);
                        var p=$("<p></p>").attr("style","margin-top: 10px;").text(data[i].video_title);
                        div3.append(label);
                        div2.append(img2,div3);
                        div1.append(img1,div2);
                        a.append(div1,p);
                        li.append(a);
                        $("#video_index_ul").append(li);
                    }
                    var div_end=$("<div></div>").attr("class","clear");
                    $("#video_index_ul").append(div_end);
                }
            }
        })


        $("#moresort_div_parent_video").attr("style","display: none;");
        $("#titlemore_video img").attr("src","images/title_69.jpg");
        flag_title_video=true;
    }
    function changeInfo(info_class,other_class){
        // layer.msg("info_class:"+info_class+"  other_class:"+other_class);
        $.ajax({
            url:"${pageContext.request.contextPath}/front_info/info_change_index.do",
            data:{
                "info_class":info_class,
                "other_class":other_class
            },
            success:function (data,status){
                if(status=="success"){
                    // <li><span>145 阅读</span><a href="#"><span>[新手学车]</span>开封驾驶员考试网上自助预约...</a></li>
                    $("#info_ul").empty();
                    var end=3;
                    if(data.length<3)
                        end=data.length;
                    for(var i=0;i<end;i++){
                        var li=$("<li></li>");
                        var span1=$("<span></span>").text(data[i].info_read+" 阅读");
                        // var span1=$("<span></span>").text("0"+" 阅读");
                        var a=$("<a></a>").attr("href","javascript:to_infodetail("+data[i].info_id+");");
                        var span2=$("<span></span>").text("["+data[i].info_class+"]");
                        var label=$("<label></label>").text(data[i].info_title);
                        a.append(span2,label);
                        li.append(span1,a);
                        $("#info_ul").append(li);
                    }
                }
            }
        })


        $("#moresort_div_parent_info").attr("style","display: none;");
        $("#titlemore_info img").attr("src","images/title_69.jpg");
        flag_title_info=true;
    }

    function changeChapter(question_class){

        // <li><span>200 测试</span><a href="kemu1_test_beginscreen.jsp">济源2014年公交驾校科目四</a></li>
        $.ajax({
            url:"${pageContext.request.contextPath}/front_question/chapter_change_index.do",
            data:{
                "question_class":question_class
            },
            success:function(data,status){
                if(status=="success"){
                    $("#chapter_ul").empty();
                    var end=3;
                    if(data.array_chapter.length<3)
                        end=array_chapter.length;
                    for(var i=0;i<end;i++){
                        var li=$("<li></li>");
                        var span=$("<span></span>").text(data.array_count[i]+" 题");
                        var a=$("<a></a>").attr("href","javascript:to_chapter_test('"+question_class+"');").text(data.array_chapter[i]);
                        li.append(span,a);
                        $("#chapter_ul").append(li);
                    }
                }
            }
        })

    }
    function changeNews(){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_news/news_init_index.do",
            success:function(data,status){
                if(status=="success"){
                    $("#news_ul").empty();
                    // <li>
                    //     <a href="test_kemu4.jsp" class="newsimg" ><img src="images/yijiakoa_24.jpg"></a>
                    //     <div class="newrigcon">
                    //         <h1><a href="test_kemu4.jsp">贵阳平安驾贵阳平安驾校科目四试题模拟练习校科目四试题模拟练习</a></h1>
                    //         <p>贵阳平安驾校科目四贵阳平安驾校科目四试题模拟练习试题模拟练习...  </p>
                    //     </div>
                    //     <div class="clear"></div>
                    // </li>
                    var path="${pageContext.request.contextPath}/img_artificial/news_img/";
                    for(var i=0;i<data.length;i++){
                        var li=$("<li></li>");
                        var a1=$("<a></a>").attr({
                            "href":"javascript:to_newsdetail("+data[i].news_id+");",
                            "class":"newsimg"
                        });
                        var img=$("<img>").attr("src",path+data[i].news_img);
                        a1.append(img);
                        var div=$("<div></div>").attr("class","newrigcon");
                        var h1=$("<h1></h1>");
                        var a2=$("<a></a>").attr("href","javascript:to_newsdetail("+data[i].news_id+");").text(data[i].news_title);
                        h1.append(a2);
                        var p=$("<p></p>").text(data[i].news_content);
                        div.append(h1,p);
                        var div_end=$("<div></div>").attr("class","clear");
                        var a3=$("<a></a>").attr("href","javascript:to_newsdetail("+data[i].news_id+");");
                        a3.append(a1,div,div_end);
                        li.append(a3);
                        $("#news_ul").append(li);
                    }
                }
            }
        })
    }


    function to_jiakao_videodetail(video_id){
        window.location.href="jiakao_videodetail.jsp?video_id_hidden="+video_id;
    }
    function to_info(info_class){
        window.location.href="info.jsp?info_class_hidden="+info_class;
    }
    function to_infodetail(info_id){
        window.location.href="info_detail.jsp?info_id_hidden="+info_id;
    }
    function to_chapter_test(question_class){
        window.location.href="Chapter_exercise.jsp?question_class_hide="+question_class;
    }
    function to_newsdetail(news_id){
        window.location.href="news_detail.jsp?news_id_hidden="+news_id;
    }


    $("#titlemore_info").click(function (){
        if(flag_title_info){
            $("#moresort_div_parent_info").attr("style","display: block;");
            $("#titlemore_info img").attr("src","images/title_692.jpg");
            flag_title_info=false;
        }else{
            $("#moresort_div_parent_info").attr("style","display: none;");
            $("#titlemore_info img").attr("src","images/title_69.jpg");
            flag_title_info=true;
        }

    })
    $("#titlemore_video").click(function (){
        if(flag_title_video){
            $("#moresort_div_parent_video").attr("style","display: block;");
            $("#titlemore_video img").attr("src","images/title_692.jpg");
            flag_title_video=false;
        }else{
            $("#moresort_div_parent_video").attr("style","display: none;");
            $("#titlemore_video img").attr("src","images/title_69.jpg");
            flag_title_video=true;
        }

    })


</script>




<script>
   var heighttop=$(".top").height();
   $(".topmenu").css("top",heighttop);
    $(".menumore").toggle(function(){
	     $(".topmenu").show(); 
	   },function(){
	     $(".topmenu").hide(); 
	 	   })
   $(".buttontop").click(function(){
	     $(".topmenu").hide();  
	   })
	   
 $(function(){
	 $(".tasecartop span a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".tasecartop span a").removeClass("payaclik");
		  $(this).addClass("payaclik");
		 })
	
	})

   function toPerson(){
        window.location.href="${pageContext.request.contextPath}/check_login_person.do";
   }

   function to_practice(num){
        var str="";
        if(num==1){
            str="科一";
        }else{
            str="科四";
        }
        window.location.href="test_kemu1.jsp?question_class="+str;
   }
 </script>











<!--头部高度赋给列表的topjs-->
<!--banner将图片的高度赋给父级扪js-->
<script>
   var heighta=$("#incltialiu li:eq(0) img").height();
   $(".main,.width,#incltialiu").height(heighta) ;
 </script>
 <!--banner将图片的高度赋给父级扪js-->
<!--首页标题点击出现更多分类js-->
 <script>
	$(".common_title").toggle(function(){
		// $(this).parent(".tabtila").siblings(".moresort").show()
		$(this).children("img").attr("src","images/title_692.jpg")
		},function(){
		// $(this).parent(".tabtila").siblings(".moresort").hide()
		$(this).children("img").attr("src","images/title_69.jpg")
		})
  </script>
 <!--首页标题点击出现更多分类js-->
</html>
